<template>
  <div v-if="showShortcut">
    <div class="edit">编辑</div>
    <div class="upperPart">
      <div>
        <el-button size="small" @click="close" plain>关闭</el-button>
        <el-button type="primary" size="small" @click="filingData" plain>保存</el-button>
      </div>
      <div class="selected">已勾选 {{ num }}/7</div>
    </div>
    <div>
      <div>
        <div v-for="(item, index) in configurationData" :key="index">
          <div>{{ item.name1 }}</div>
          <el-row>
            <el-col
              :span="3"
              v-for="(items, indexs) in item.child"
              :key="indexs"
              v-model="selectedNotice"
            >
              <input
                :value="selectedNotice"
                @change="handleCheckboxChange(items.id)"
                type="checkbox"
                :checked="items.isChecked"
              />
              <span class="contentText">{{ items.name }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import * as Home from '@/api/home'
  import { useUserStore } from '@/store/modules/user'
  const userStore = useUserStore()
  const message = useMessage()
  const showShortcut = ref(false)
  const num = ref(0)
  let myArray = reactive<any[]>([])
  //定义菜单类型
  interface Item {
    id: number
    name: string
    name1: string
  }
  // 配置
  const configurationData = ref<any[]>([])
  const selectedNotice = ref<any[]>([])
  const handleCheckboxChange = (id: number) => {
    const index = selectedNotice.value.indexOf(id)
    if (index !== -1) {
      selectedNotice.value.splice(index, 1)
      num.value = selectedNotice.value.length
    } else {
      selectedNotice.value.push(id)
      num.value = selectedNotice.value.length
      if (selectedNotice.value.length > 7) {
        message.error('只能选中7个菜单!')
        selectedNotice.value = selectedNotice.value.slice(0, 7)
        num.value = selectedNotice.value.length
        upDateMenuList()
        return
      }
    }
  }
  //获取快捷窗口数据
  const getShortcutWindowData = async () => {
    try {
      let userId = userStore.getUser.id
      const res = await Home.getShortcutWindow(userId)
      myArray = res.list
      num.value = myArray.length
      getMenuList()
    } finally {
    }
  }
  const openShortcut = async () => {
    showShortcut.value = true
    selectedNotice.value = []
    configurationData.value = []
    getShortcutWindowData()
  }

  /**
   * 菜单数据转换
   * @param arr
   */
  const transformArray = (arr: Item[]): { name1: string; child: Item[] }[] => {
    const result: { name1: string; child: Item[] }[] = []

    const map = new Map<string, Item[]>()

    for (const item of arr) {
      if (!map.has(item.name1)) {
        map.set(item.name1, [])
      }
      map.get(item.name1)?.push(item)
    }

    for (const [name1, items] of map) {
      result.push({ name1, child: items })
    }

    return result
  }
  //获取菜单列表数据
  const getMenuList = async () => {
    try {
      const resData = await Home.getMenuList()
      var data = transformArray(resData)
      myArray.forEach((value) => {
        data.map((s) => {
          s.child.map((V) => {
            if (value['menuId'] == V['id']) {
              V['isChecked'] = true
              selectedNotice.value.push(V.id)
            }
          })
        })
      })
      configurationData.value = data
      console.log(myArray)
      console.log(configurationData.value)
    } finally {
      // loading.value = false
    }
  }
  const upDateMenuList = async () => {
    try {
      configurationData.value = []
      const resData = await Home.getMenuList()
      var data = transformArray(resData)
      selectedNotice.value.forEach((value) => {
        data.map((s) => {
          s.child.map((V) => {
            if (value == V['id']) {
              V['isChecked'] = true
            }
          })
        })
      })
      configurationData.value = data
    } finally {
    }
  }

  // 保存
  const filingData = async () => {
    try {
      let data = {
        userId: userStore.getUser.id,
        menuIds: Array.from(Object.values(selectedNotice.value)) as number[]
      }
      await Home.checkMenus(data)
      showShortcut.value = false
      emit('success')
    } finally {
    }
  }
  // 关闭
  const close = () => {
    showShortcut.value = false
    emit('success')
  }
  defineExpose({ openShortcut })
  const emit = defineEmits(['success'])
</script>
<style lang="scss" scoped>
  .edit {
    font-size: 18px;
    font-weight: 700;
  }
  .upperPart {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    .selected {
      color: #2cc0bc;
    }
  }
  .configuration {
    margin-top: 18px;
    height: 14px;
    font-size: 16px;
    font-weight: 500;
  }
  .contentText {
    padding-left: 5px;
  }
</style>
